<template>
  <div>
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>

    <div class="w">
      <img src="../assets/img/intr1.png" alt="" />
      <div class="w1200">
        <div class="auout-main clearfix">
          <div class="left-nav fl">
            <h2>
              <p>About Us</p>
              <p>关于我们</p>
            </h2>
            <ul>
              <!-- <li><nuxt-link to="">公司简介</nuxt-link></li>

              <li><nuxt-link to="">组织架构</nuxt-link></li>

              <li><nuxt-link to="">联系我们</nuxt-link></li> -->

              <el-tabs v-model="activeName" tab-position="left">
                <el-tab-pane name="gsjj" label="公司简介"> </el-tab-pane>
                <el-tab-pane name="zzjg" label="组织架构"> </el-tab-pane>
                <el-tab-pane name="lxwm" label="联系我们"></el-tab-pane>
              </el-tabs>
            </ul>
          </div>

          <div v-if="activeName === 'gsjj'" class="aboutus-con fl">
            <h2 class="title">云南有块田农业科技有限公司</h2>
            <p class="small-title">
              <img src="../assets/img/intr2.png" alt="" />
              <span>旨在打造标准化农田种植基地样板</span>
            </p>
            <p class="intr-con">
              云南有块田农业科技有限公司成立于2020年，是一家集农业种植基地运营管理、农业专家种植指导、基地价值评估、基地信用评分、农资采购、基地经营权转让、基地产品订单销售、种植端大数据溯源、金融管理服务等为一体的农业互联网公司。公司旨在打造标准化农田种植基地样板，通过“科技+金融+基地+订单+农户+技术”的方式进行标准化种植推广，通过规范农业种植来提高农产品品质，增加农业收入，促进农业产业升级。
            </p>
            <img
              src="../assets/img/intr3.png"
              alt=""
              width="435"
              height="256"
            />
          </div>

          <div v-if="activeName === 'zzjg'" class="aboutus-con fl">
            <img src="../assets/img/zz.png" alt="" width="100%" />
          </div>

          <div v-if="activeName === 'lxwm'" class="aboutus-con fl">
            <el-form
              style="margin: 30px 10px 30px 30px"
              :model="dataForm"
              ref="dataForm"
              label-width="80px"
            >
              <el-row>
                <el-col :span="18">
                  <el-form-item label="公司名称:">

                     <span>{{ dataForm.companyName }}</span>

                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="18">
                  <el-form-item label="联系人:">

                     <span>{{ dataForm.linkman }}</span>

                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="18">
                  <el-form-item label="联系电话:">

                      <span>{{ dataForm.telephone }}</span>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="18">
                  <el-form-item label="邮箱:">

                       <span>{{ dataForm.email }}</span>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="18">
                  <el-form-item label="联系地址:">

                       <span>{{ dataForm.address }}</span>

                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="16">

                   <img  :src="mapUrl" alt="公司位置"  />

                </el-col>
              </el-row>
            </el-form>
          </div>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../components/head";
import SearchHeader from "./indexHome/searchHeader";
import FooterPage from "../components/footer";
import navPage from "../components/nav";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },
  mounted() {
    this.getAboutUs(); //关于我们
  },

  data() {
    return {
      activeName: "gsjj",
      dataForm: {
        companyName: "", //公司名称
        linkman: "", //联系人
        telephone: "", //联系电话
        email: "", //邮箱
        address: "", //联系地址
        longitude: 0, //经度
        latitude: 0, //纬度
      },
      mapUrl:'',//地图地址
    };
  },
  methods: {
    getAboutUs() {

      this.$http("get", "/sys/iaContactUs/getdetail.do")
        .then((res) => {
          if (res.code == "0000") {
            this.dataForm = res.result;
            //处理地图地址
            this.mapUrl="http://api.map.baidu.com/staticimage/v2?ak=ZbZimLXDnKbpnBcsN0Rq5CoU&mcode=666666&center="+
            this.dataForm.longitude+","+this.dataForm.latitude+
            "&markers="+this.dataForm.longitude+","+this.dataForm.latitude
            +"&width=800&height=380&zoom=17"

          }
        })
        .catch((err) => {
        });


    },
  },
};
</script>
<style scoped>
.w1200 {
  width: 1200px;
  margin: 0 auto;
  background: #fff;
  padding-bottom: 90px;
}
.auout-main {
  width: 1026px;
  margin: 0px auto;
  min-height: 300px;
  padding-top: 30px;
}
.left-nav h2 {
  border-left: 9px solid #f48d06;
  padding-left: 8px;
}
.left-nav h2 p:nth-child(1) {
  width: 86px;
  height: 18px;
  font-size: 18px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #d8d8d8;
  line-height: 18px;
}
.left-nav h2 p:nth-child(2) {
  width: 88px;
  height: 30px;
  font-size: 22px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #4a4a4a;
  line-height: 30px;
}
.left-nav ul {
  margin-left: 30px;
  width: 150px;
  min-height: 200px;
  margin-top: 30px;
}
.left-nav ul li {
  line-height: 40px;
}
.left-nav ul li a {
  font-size: 18px;
  color: #4a4a4a;
  font-weight: bold;
}
.aboutus-con {
  min-height: 300px;

  width: 846px;
  margin-top: 42px;
  border-top: 1px solid #e6e6e6;
}
.aboutus-con .title {
  height: 25px;
  font-size: 18px;
  font-family: "PingFangSC-Semibold, PingFang SC";
  font-weight: 600;
  color: #4a4a4a;
  line-height: 25px;
  margin-top: 42px;
}
.small-title {
  margin: 15px 0;
}
.small-title img {
  width: 23px;
  height: 15px;
}
.small-title span {
  height: 20px;
  font-size: 14px;
  font-family: "PingFangSC-Regular, PingFang SC";
  font-weight: 400;
  color: #9b9b9b;
  line-height: 20px;
}
.intr-con {
  text-indent: 28px;

  font-size: 14px;
  font-family: "PingFangSC-Regular, PingFang SC";
  font-weight: 400;
  color: #606266;
  line-height: 20px;
  margin-bottom: 20px;
}
</style>
